<template>
    <view class="day-item" :class="{ 'current-month': day.currentMonth, today: day.fullDate == today }">
        <view class="day-content">
            <text class="day-number">{{ day.day }}</text>
            <text class="day-value">{{ data.data }}</text>
            <text v-if="data" class="record-trend" :class="trend.cls">
                {{ `${diff}${trend.icon}` }}
            </text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'calendar-item',
    props: {
        day: {
            type: Object,
            default: () => ({})
        },
        data: {
            type: Object,
            default: () => ({ data: '' })
        },
        last: {
            type: Object,
            default: () => ({ data: '' })
        }
    },
    data() {
        return {
            today: new Date().toISOString().split('T')[0]
        };
    },

    computed: {
        trend() {
            if (this.last) {
                if (this.data) {
                    if (Number(this.data.data) > Number(this.last.data)) {
                        return { cls: 'trend-up', icon: '↑' };
                    } else if (Number(this.data.data) < Number(this.last.data)) {
                        return { cls: 'trend-down', icon: '↓' };
                    } else {
                        return { cls: 'trend-base', icon: '' };
                    }
                }
            } else {
                return { cls: 'trend-base', icon: '' };
            }
        },

        diff() {
            
            if (this.data && this.last) {
                return parseFloat(this.data.data - this.last.data).toFixed(2);
            } else {
                return '--';
            }
        }
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.day-item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    height: 110rpx;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    border-radius: 8rpx;
    padding: 8rpx 0;
    &.today {
        border: 1px solid $brand-color;
    }
    &:not(.current-month) {
        opacity: 0.2;
    }

    .day-content {
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        .day-number {
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 2px;
        }
        .day-value {
            font-size: 20rpx;
            opacity: 0.8;
        }

        .record-trend {
            font-size: 20rpx;
            &.trend-up {
                color: #ff4d4f;
            }
            &.trend-down {
                color: #52c41a;
            }
        }
    }
}
</style>
